<template>
  <div>
    <div class="list1" >
        <el-input v-model="inputvalue" placeholder="用户账号" style="width: 300px;margin-right: 15px;"></el-input>
        <el-select clearable v-model="statevalue" placeholder="角色类型" style="margin-right: 10px;">
            <el-option
            label="管理员"
            :value="1">
            </el-option>
            <el-option
            label="普通用户"
            :value="2">
            </el-option>
        </el-select>
        <el-date-picker
        v-model="datevalue"
        type="daterange"
        range-separator="至"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd "
        value-format="yyyy-MM-dd"
        style="margin-right: 10px;">
      </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="logsearch" style="margin-left: 10px;">查询</el-button>
    </div>
    <div class="list2">
        <el-tabs type="border-card" >
            <el-tab-pane label="登录日志" >
                <el-table
                :data="logData"
                v-loading="loading"
                border
                style="width: 100%">
                <el-table-column
                    align="center"
                    label="序号"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="登录账号"
                    align="center"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="type"
                    align="center"
                    label="角色类型">
                    <template slot-scope="scope">
                      {{ scope.row.type == 1?"管理员":"普通用户" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="email"
                    align="center"
                    label="邮箱">
                </el-table-column>
                <el-table-column
                    prop="createtime"
                    align="center"
                    label="登录时间">
                </el-table-column>               
                <el-table-column
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="danger" @click="deletelog(scope.row.id)">删除记录</el-button>
                    </template>
                </el-table-column>
                
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 9, 20, 50,100]"
                    :page-size="9"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="logtotal"
                    style="text-align: right;margin-top: 10px">
                </el-pagination>
            </el-tab-pane>

        </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            loading:false,
            //卡片切换
            flag:0,
            //第一行数据
            statevalue:"",
            inputvalue:"",
            datevalue:"",
            //第二行数据
            logData:[],
            logtotal:"",
            //载荷
            logpage:{
              username: "",
              type: "",
              startDate:"", 
              endDate: "",
              currPage: 0,
              pageNum: 9,
            },
            // 删除载荷
            deletepage:{
              id: "",
              token:sessionStorage.getItem("token")
            },

        }
    },
    created(){
        this.getpagemessage()
    },
    methods:{
        //初始化数据
        getpagemessage(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/users/getLoginData",{params:this.logpage}).then((res)=>{
                console.log(res.data)
                this.logData = res.data.data
                setTimeout(() => {
                  this.loading = false
                }, 500);
                for(let i =0;i<this.logData.length;i++){
                    const date = new Date(this.logData[i].createtime);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.logData[i].createtime = formattedTime;
                    
                }
                this.logtotal = res.data.total
            })
        },
        //分页器方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.logpage.pageNum = val
            this.getpagemessage()
        },
        handleCurrentChange(val) {
            this.logpage.currPage= val-1;
            this.getpagemessage()
        },
        //智能设备查询
        logsearch(){
            this.logpage.username = this.inputvalue
            this.logpage.type = this.statevalue
            if(this.datevalue == null){
              this.logpage.startDate = ""
              this.logpage.endDate = ""
            }else{
              this.logpage.startDate = this.datevalue[0]
              this.logpage.endDate = this.datevalue[1]
            }
            
            this.logpage.currPage = 0
            this.getpagemessage()
        },
        // 删除记录
        deletelog(id){
          this.$confirm('确定删除该条登录记录？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deletepage.id = id
            this.$axios.get("http://community.byesame.com/users/delLoginData",{params:this.deletepage}).then((res)=>{
              console.log(res)
              this.getpagemessage()
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
            })
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
         
        }
       
    }
}
</script>

<style scoped> 
.list1{
    margin-bottom: 15px;
}
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
::v-deep td {
        padding-top:4px !important;
        padding-bottom:4px !important;
    }
</style>